<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<title><%@include
		file="/WEB-INF/jsp/admin/public/projectName.jsp"%></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
<%@include file="/WEB-INF/jsp/admin/public/cssHeader.jsp"%>
<%@include file="/WEB-INF/jsp/admin/public/jsBottom.jsp"%>
</head>
<body class="white-bg">
	<div class="row white-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="ibox float-e-margins">
				<!-- row-start -->
				<div class="container col-md-12 column" style="margin-left: 10px;">
					<form id="fromPage"
						action="${pageContext.request.contextPath}/admin/gm/gmList.html"
						method="get">
						<div class="tab-pane fade active in" id="A">
							<div class="row cmd" margin-top: 10px;">
								<div class="top form-group col-md-2">
									<select id="selectCmd" class="form-control cartItem">
										<option value="">请选择命令</option>
										<c:forEach var="item" items="${cmds }">
											<option id="${item.id }" value="${item.cmd }">${item.remark }</option>
										</c:forEach>
									</select>
								</div>
							</div>

							<div class="row "margin-top: 10px;">
								<div class="form-group col-md-2">
									<input type="text " name="cmd" value="" id="name"
										class="search form-control" placeholder="GM命令" />
								</div>
								<div class="form-group col-md-2">
									<input type="text " name="description" value=""
										id="description" class="search form-control"
										placeholder="命令备注" />
								</div>
								<div class="form-group col-md-1 ">
									<a id="postForm" class="btn btn-primary btn-block">发送</a>
								</div>
							</div>
 
						</div>
						<div class="wrapper wrapper-content animated fadeInRight row">
							<div class="col-md-12">
								<div>
									<table class="table table-hover table-bordered">
										<thead>
											<tr>
												<th>id</th>
												<th>操作用户</th>
												<th>发送命令</th>
												<th>发送状态</th>
												<th>服务器返回</th>
												<th>操作时间</th>
												<th>备注</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach var="item" items="${pageBean.pageList }">
												<tr>
													<td>${item.id }</td>
													<td>${item.operator }</td>
													<td>${item.cmd }</td>
													<td><c:if test="${item.status == 0 }">成功</c:if> <c:if
															test="${item.status == 1 }">失败</c:if></td>
													<td>${item.retureMes }</td>
													<td><fmt:formatDate value="${item.postTime }"
															pattern="yyyy-MM-dd HH:mm" /></td>
													<td>${item.description }</td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
							</div>
							<!-- row-end -->
							<input name="pageNum" value="${pageBean.currentPage}"
										type="hidden" />
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	
	<%@include file="/WEB-INF/jsp/admin/public/pageView.jspf"%>
</body>
</html>
<%-- 
<div class="top form-group col-md-2">
	<select name="cmd" class="form-control">
		<option value="">请选择命令</option>
		<c:forEach var="item" items="${cmds }">
			<option id="${item.id }" value="${item.cmd }">${item.remark }</option>
		</c:forEach>
	</select>
</div> --%>

<script type="text/javascript">
	$("#postForm").click(function(){
		var cmd = $("input[name='cmd']").val();
		var description = $("input[name='description']").val();
		//alert(cmd);
		//alert(description);
		if(!cmd){
			var url = "${pageContext.request.contextPath}/admin/gm/send.json";
			var args = {"data":new Date()};
			args.cmd = cmd;
			args.description = description;
			
			$.post(url,args,function(data){
//	 			alert(data.code);
//	 			alert(data.message);
				layer.msg(data.message);
				setTimeout(function(){
					window.location.reload();
				}, 1000);
			});
		}else{
			layer.msg("命令不能为空");
		}
		
		
	});

	// 移除所有选项卡
	function removeAllCmdItem() {
		$(".cmd").children(":not(.top)").remove();
	}

	function addCmdItem(array) {
		console.log(array);

		for (var i = 0; i < array.length; i++) {
			var cartItem = array[i];
			var divFrontTag = "<div class=\"form-group col-md-2\">";
			var divEndTag = "</div>";

			if (cartItem.type == 0) {
				var input = "<input class=\"form-control cartItem\" value=\""+cartItem.text+"\"/>";
				var html = divFrontTag + input + divEndTag;

				$(".cmd").append(html);
			} else if (cartItem.type == 1) {
				// 				下拉列表框
				var selectFrontTag = "<select class=\"form-control cartItem\">";
				var selectEndTag = "</select>";
				var options = cartItem.options;
				var optionTags = "";
				for (var j = 0; j < options.length; j++) {
					var option = options[j];

					optionTags = optionTags + "<option>" + option
							+ "</option>";
				}
				var html = divFrontTag + selectFrontTag + optionTags
						+ selectEndTag + divEndTag;
				$(".cmd").append(html);
			}

		}
	}

	var cmds = JSON.parse("${gmJson}");
	$("#selectCmd").change(function() {
		// 得到所有的value
		var cmd = $(this).val();
		// 		alert(cmd);
		//
		if (cmd) {
			// 如果有值
			for (var i = 0; i < cmds.length; i++) {
				var cmdObj = cmds[i];
				if (cmdObj.cmd == cmd) {
					// alert("找到了");
					removeAllCmdItem();
					//添加相应的配置项
					addCmdItem(cmdObj.cmdItems);
					// console.log(cmdObj.cmdItems);
				}
			}
		} else {
			// 如果没有值,移除选项卡
			removeAllCmdItem();
		}
		
	});
	
	// 得到所有复选框的值,并且加入到GM命令文本框中
	$(".cmd").on("change","select",function(){
		setCmd();
	});
	$(".cmd").on("keyup","input",function(){
		setCmd();
	});
	
	
	function setCmd(){
		var addVal = "";
		var objs = $(".cmd").find("input,select");
		for(var i=0;i<objs.size();i++){
			var obj = objs.get(i);
			var value = $(obj).val();
// 			alert(obj);
			if(i == 0){
				addVal = value;
			}else{
				addVal = addVal+ " " + value;
			}
		}
// 		alert(objs.length);
		$("input[name='cmd']").val(addVal);
	}	
</script>

